<template>
  <div class="container">
    <div class="header-box">
      <h3><span>智能识别</span></h3>
      <el-row class="demo-form-inline">
        <el-col :span="12">
          <el-form :inline="true" :model="formInline">
            <el-form-item label="上传铭牌">
              <el-upload
                :auto-upload="false"
                class="avatar-uploader"
                :on-change="fileChange"
                action=""
                :show-file-list="false">
                <img v-if="isResult" :src="imgUrl" class="avatar-brand">
                <div v-else-if="isLoading" class="el-icon-plus avatar-uploader-icon">
                  <div class="loading" v-loading="true" element-loading-text="拼命加载中"></div>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" class="result">
          <template v-if="isResult">
            <div class="result-title">
              内容识别
            </div>
            <div contenteditable="true" class="result-content">
              <ol
                style="box-sizing: border-box; margin-block-start: 1em; padding-inline-start: 2.3em; font-size: 16px; margin: 8px 0px; color: rgb(67, 67, 107); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; letter-spacing: 0.5px;">
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;">产品名称：计算机</li>
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;">规格型号：天逸510S
                </li>
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;">品牌：联想(Lenovo)
                </li>
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;">技术参数：
                  <ul
                    style="box-sizing: border-box; list-style: disc; padding: 0px; margin-block: 1em; padding-inline-start: 1.2em; font-size: 1rem; letter-spacing: 0.1rem; margin: 8px 0px;">
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      长度：503
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      宽度：393
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      高度：195
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      重量（毫克）：5330000
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      机箱大小：10L以下
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      系统：Windows 11
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      尺寸：23英寸
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      分辨率：1929*1080
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      硬盘容量：512GB SSD
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      最大支持容量：32GB
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      显卡型号：集成显卡
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      声卡：集成声卡
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      支持IPV6：支持IPV6
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      能效登记：一级能效
                    </li>
                  </ul>
                </li>
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;">
                  所属分类：电脑设备-电脑整机-笔记本电脑
                </li>
              </ol>
            </div>
          </template>
        </el-col>
      </el-row>
      <el-divider v-if="isResult"/>
      <div class="bottom-content" v-if="isResult">
        <div>
          <el-tag
            key="label"
            effect="dark">
            聚类相似列表
          </el-tag>
        </div>
        <el-row class="table-content">
          <el-col :span="12">
            <el-table ref="singleTable" :data="tableData" border stripe size="mini" style="width: 100%"
                      @row-click="rowClick" :row-key="getRowKey"
                      :row-class-name="rowClassName"
                      highlight-current-row>
              <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
              <el-table-column prop="code" label="品种码" align="center" width="160"></el-table-column>
              <el-table-column prop="value" label="相似度" align="center" width="100"></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12" class="result">
            <div class="result-title">
              聚类结果
            </div>
            <div class="result-content result-content2">
              <div class="result-content-left">
                <img :src="selectRow.imgUrl" alt="">
              </div>
              <div class="result-content-right" v-html="selectRow.info" contenteditable="true"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-divider v-if="showHist"/>
      <div class="bottom-content" v-if="showHist">
        <div>
          <el-tag
            key="label"
            effect="dark">
            识别历史记录
          </el-tag>
        </div>
        <el-row>
          <el-col :span="4" class="his-content">
            <img :src="imgUrl" @click="histClick"/>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import de from "element-ui/src/locale/lang/de";

export default {
  name: 'brand',
  data() {
    return {
      value1: '',
      formInline: {
        user: '',
        region: ''
      },
      isResult: false,
      isLoading: false,
      showHist: false,
      imgUrl: '/brand.png',
      clickId: 1,
      selectRow: {},
      tableData: [{
        id: 1,
        code: 'AC1094339',
        name: '计算机-天逸510S',
        value: '99.99',
        imgUrl: '/ty-510S.jpg',
        info: '<ol style="box-sizing: border-box; margin-block-start: 1em; padding-inline-start: 2.3em; font-size: 16px; margin: 8px 0px; color: rgb(67, 67, 107); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; letter-spacing: 0.5px;"><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">处理器</span>：联想天逸510S搭载了全新第十代智能英特尔酷睿i5处理器，性能强劲，足以应对各种办公软件和多任务处理需求。</p></li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">内存容量</span>：这款电脑主机配备了8GB内存，能够满足日常办公需要。</p></li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">硬盘容量</span>：拥有1TB 7200转的硬盘，为使用者提供了充足的数据存储空间。</p></li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">显卡芯片</span>：电脑主机采用AMD Radeon Vega 8共享内存容量的核芯显卡，虽然不是高性能独立显卡，但对于常规的办公应用来说已经足够。</p></li></ol>'
      }, {
        id: 2,
        code: 'AC2938300',
        name: '拯救者 刃9000K-34IRZ I714700KF32G2TGW-4UD微型计算机',
        value: '92.84',
        imgUrl: 'r-9000K-34IRZ.jpg',
        info: '<ol style="box-sizing: border-box; margin-block-start: 1em; padding-inline-start: 2.3em; font-size: 16px; margin: 8px 0px; color: rgb(67, 67, 107); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; letter-spacing: 0.5px;"><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">处理器</span>：该款电脑主机搭载了Intel 酷睿i7 14700KF处理器，这是一款性能强劲的CPU，能够满足各种高负荷计算任务的需求。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">内存容量</span>：拥有32GB的内存容量，足以应对多任务处理和大型软件运行所需的资源。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">硬盘容量</span>：配备了1TB的固态硬盘，提供快速的数据读取和写入速度，同时为使用者提供充足的存储空间。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">显卡芯片</span>：采用NVIDIA GeForce RTX 4070 Ti显卡，拥有高性能图形处理能力，适合游戏和专业图像处理。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">操作系统</span>：预装了Windows 11 Home Basic 64bit（64位家庭普通版）操作系统，提供了良好的使用体验和系统稳定性。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">主板芯片组</span>：使用了Intel Z690芯片组，支持高性能和最新技术，确保了优秀的兼容性和扩展性。</li></ol>'
      }]
    }
  },
  methods: {
    fileChange(file, fileList) {
      this.isLoading = true
      setTimeout(() => {
        this.showResult()
        // sessionStorage.setItem('picture-result', '1')
        this.showHist = true
      }, 1000)
    },
    rowClick(row) {
      this.clickId = row.id
      this.selectRow = row
      this.$refs.singleTable.setCurrentRow(row)
    },
    getRowKey(row) {
      return row.id
    },
    rowClassName(data) {
      if (data.row.id === this.clickId) {
        return 'current-row'
      }
    },
    histClick() {
      this.showResult()
    },
    showResult() {
      this.isResult = true
      this.isLoading = false
    }
  },
  mounted() {
    this.selectRow = this.tableData[0]
    this.showHist = true
  }
}

</script>
<style lang="scss">

</style>
<style lang="scss" scoped>

.container {
  .header-box {
    height: auto !important;
    min-height: calc(100vh - 60px) !important;
  }
}

.play-box {
  img {
    display: inline-block;
    width: 15px;
    margin: 0 5px;
  }
}

.demo-form-inline {
  padding: 10px;
  height: 300px;
  width: 100%;
}

.title {
  .title-left {
    float: left;
  }

  .title-right {
    float: right;
  }
}

.result {
  height: 100%;
  padding-left: 10px;
}

.result-title {
  font-size: 16px;
  font-weight: bold;
  color: #144a74;
  padding-bottom: 10px;
}

.features-title {
  font-size: 16px;
  font-weight: bold;
  color: #144a74;
  padding: 10px 0;
  text-align: center;
}

.result-content {
  height: calc(100% - 68px);
  width: 100%;
  border: solid 1px #DCDFE6;
  overflow: auto;
  padding: 10px;
}

.result-content2 {
  height: calc(100% - 17px);
}

.result-content-left {
  float: left;
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    max-width: 200px;
    max-height: 100%;
  }
}

.result-content-right {
  float: right;
  width: calc(100% - 200px);
  height: 100%;
  padding-left: 10px;
  overflow: auto;
}

.features-value {
  width: 100%;
  border: solid 1px #DCDFE6;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
}

.bottom-content {
  padding: 10px;
}

.table-content {
  padding-top: 10px;
  height: 215px;
}

.loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -40%;

  .el-loading-mask .el-loading-spinner {
    top: 0 !important;
  }
}

.his-content {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    max-width: 80%;
    max-height: 80%;
    cursor: pointer;
  }

  img:hover {
    border: solid 1px #DCDFE6;
  }
}
</style>
<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 320px;
  height: 240px;
  line-height: 240px;
  text-align: center;
}

.el-upload--text {
  width: 320px;
  height: 240px;
  display: flex;
  justify-content: center;
}

.avatar-brand {
  //width: 320px;
  height: 240px;
  display: block;
}
</style>
